<template>
  <div class="user-info">
    <el-row :span="24">
      <el-col :span="8">
        <basic-container>
          <div class="user-info__content">
            <img class="user-info__img"
                 :src="form.src || '/img/userdefault.png'"
                 alt="" />
            <p class="user-info__name">{{form.user_real_name}}</p>
            <!-- <router-link class="user-info__setting"
                         :to="{path:'/info/setting'}">个人设置</router-link> -->
            <p class="user-info__desc">{{form.ms}}</p>
            <div class="user-info__detail-desc">
              <p><i class="el-icon-message"></i><span>{{form.user_email}}</span></p>
              <p><i class="el-icon-postcard"></i><span>{{form.company_name}} · {{form.parent_name}}</span></p>
              <p><i class="el-icon-location-information"></i><span>{{form.company_address}}</span></p>
            </div>
            <!-- <div class="user-info__divider"></div>
            <h4>标签</h4>
            <div class="user-info__tags">
              <el-tag effect="plain"
                      v-for="(tag,index) in tags"
                      :key="index">
                {{tag}}
              </el-tag>
            </div> -->
          </div>
        </basic-container>
      </el-col>
      <el-col :span="16">
        <basic-container>
          <!-- <avue-tabs :option="option"
                     v-model="form"
                     @chang="handleChange"
                     @submit="handleSubmit"></avue-tabs> -->
          <el-tabs v-model="type">
            <el-tab-pane label="个人信息" name="info">              
              <df-element-form 
                style="width: 50%;"
                ref="customForm"
                :formConfig="formConfig[0]" 
                :value="form" 
                @formFiledChange="formFiledChange">
                <template slot="before">
                  <div class="el-form-item el-form-item--feedback el-form-item--small" title="头像">
                    <label for="concattel" class="el-form-item__label" style="width: 150px">头像</label>
                    <div class="el-form-item__content" style="margin-left: 150px">
                      <el-upload
                        :headers = "headers"
                        class="avatar-uploader"
                        :action="objectStore.upload_img"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess">
                        <img v-if="form.src != ''" :src="form.src" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                    </div>
                  </div>
                </template>
                <div style="padding-left:100px">
                  <el-button type="primary" size="small" @click="handleSubmit">提交</el-button>
                  <el-button size="small" @click="clear">清空</el-button>
                </div>
              </df-element-form>
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="password">
              <df-element-form 
                style="width: 50%;"
                ref="passwordform"
                :formConfig="formConfig[1]" 
                :value="passwordform" 
                @formFiledChange="passwordformFiledChange">
                <div style="padding-left:100px">
                  <el-button type="primary" size="small" @click="handleSubmit">保存</el-button>
                  <el-button size="small" @click="clear">清空</el-button>
                </div>
              </df-element-form>
            </el-tab-pane>
          </el-tabs>
        </basic-container>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { objectStore } from '@/api/common';
import { api } from "@/api/common";
import option from "@/const/user/info";
import { getFormConfigData } from '@/const/user/newinfo'
import { setStore } from '@/util/store'
import { setUserInfo } from '@/util/auth'

export default {
  data () {
    return {
      objectStore: objectStore,
      type: "info",
      option: option,
      tags: [
        ' 善解人意',
        '开朗乐观',
        '真诚热情',
        '心地善良',
        '谦恭有礼',
        '彬彬有礼',
        '虚怀若谷',
        '严于律己',
        '雍容大度',
        '热情洋溢',
        '从容自若',
        '诚挚',
        '温厚',
        '谦让',
        '勤恳',
        '耿直'
      ],
      form: Object.assign({}, this.$store.getters.userInfo),
      passwordform: {
        old_pass: '',
        new_pass: '',
        confirm_pass: ''
      },
      imgurl: '',
      formConfig : [],
      headers: {
        uid: this.$store.getters.userInfo.id,
        token: this.$store.getters.token
      }
    };
  },
  created () {
    // this.getFile()
    this.getFormConfig()
  },
  computed: {
    // imgurl: function () {
    //   let _src = '' 
    //   if (form.hasOwnProperty('user_img') && form.user_img != '') {

    //   } else {

    //   }     
    //   return ''
    // }
  },
  methods: {
    // 获取表单配置
    getFormConfig() {
      var _this = this

      _this.formConfig = getFormConfigData()
    },
    clear () {
      this.form = Object.assign({}, this.$store.getters.userInfo)
      // this.getFile()
    },
    handleSubmit () {
      let _this = this,
        _url = '',
        params = {}
      if (_this.type === 'info') {
        _url = api.save_personal_info
        params = _this.form
      } else {
        _url = api.repass
        params = _this.passwordform
      }
       _this.axios.post(_url, params).then((res)=>{
        console.log(res)
        if(res.data.code == 10000){
          if (_this.type === 'info') { 
            setUserInfo(_this.form)
            setStore({ name: 'userInfo', content: _this.form, type: 'session' })
            _this.$store.commit('SET_USERINFO', _this.form);
            _this.$message({
              showClose: false,
              message: res.data.message,
              type: 'success'
            });
          } else {
            _this.$message({
              showClose: false,
              message: '密码修改成功，需重新登录',
              type: 'success'
            });
            _this.$store.dispatch("LogOut").then(() => {
              _this.$router.push({ path: "/login" });
            });
          }          
        }else{
          _this.$message({
            showClose: false,
            message: res.data.message,
            type: 'error'
          });
        }
      }).catch((err)=>{
        console.log('调用失败',err)
      })
    },
    handleChange (item) {
      this.type = item.prop;
    },
    // 表单值改变，改变formvalue
    formFiledChange(data) {
      this.$set(this.form, data.key, data.val)
      console.log(this.form)
    }, 
    passwordformFiledChange (data) {
      this.$set(this.passwordform, data.key, data.val)
      console.log(this.passwordform)
    }, 
    // 上传文件成功
    handleAvatarSuccess (response) {
      this.imgurl = response.data.src
      this.form['src'] = response.data.src
      this.form['user_img'] = response.data.key
    },
    getFile () {
      let _this = this

      if (_this.form.hasOwnProperty('user_img') && _this.form.user_img != '') {
        _this.axios.post(objectStore.getObjectChannel, { key: _this.form.user_img }).then((res)=>{
          console.log(res)
          if(res.data.code == 10000){
            _this.imgurl = res.data.data.src
          }else{
            _this.imgurl = ''
            _this.$message({
              showClose: false,
              message: res.data.message,
              type: 'error'
            });
          }
        }).catch((err)=>{
          _this.imgurl = ''
          console.log('调用失败',err)
        })
      } else {
        _this.imgurl = ''
      }
    }
  }
};
</script>

<style lang="scss">
.user-info {
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .avue-tabs {
    padding: 0 10px;
  }
  .el-tabs__content {
    padding: 20px 0;
  }
  &__img {
    display: block;
    margin: 0 auto;
    border-radius: 100%;
    width: 100px;
    height: 100px;
  }
  &__name {
    text-align: center;
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
    margin-bottom: 0;
    margin-top: 10px;
  }
  &__setting {
    margin-bottom: 12px;
    display: block;
    font-size: 12px;
    color: #409EFF;
    text-align: center;
  }
  &__desc {
    text-align: center;
    width: 200px;
    margin: 0 auto;
  }
  &__detail-desc {
    margin-top: 50px;
    font-size: 14px;
    p {
      margin-bottom: 10px;
    }
    span {
      margin-left: 10px;
    }
  }
  &__divider {
    border-top: 1px dashed #e8e8e8;
    display: block;
    height: 0;
    width: 100%;
    margin: 24px 0;
    clear: both;
  }
  &__tags {
    .el-tag {
      margin: 0 5px 5px 0;
    }
  }
}
</style>
